<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定手机号码</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      body{background:#FFF;}
      .uCenter_notice{background:#fff3f3;color:#ff6565;font-size:0.27rem;text-align:center;padding:0.2rem;border-radius:0.07rem;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <div class="user-back" @click="api.closeWin()">
                <img src="../../../image/icons/left.png" />
            </div>
            <div class="user-content">
                <h3 class="user-title">绑定手机号码</h3>
                <div class="user-input">
                    <input type="tel" v-model.trim="mobile" maxlength='11' placeholder="请输入手机号码" />
                </div>
                <div class="user-input">
                    <input type="tel" v-model.trim="verify_code" placeholder="4位的数字" maxlength="4" />
                    <span v-if="isSending" class="codeBtn">{{countDownTime}}s后可重发</span>
                    <span v-else class="codeBtn" @click="sendMsg">发送验证</span>
                </div>
                <div v-if="needPassword" class="user-input" >
                    <input ref="password" type="password" v-model.trim="passwd" placeholder="请输入密码" />
                    <img @click="toggleHidePassword" v-if="hidePassword" src="../../../image/icons/closeEye.png" class="passIcon close" />
                    <img @click="toggleHidePassword" v-else src="../../../image/icons/openEye.png" class="passIcon" />
                </div>
                <div v-if="showTips" class="uCenter_notice">此手机号已注册过，继续操作会将用户资料合并</div>
                <button class="user-btn public-button" @click="onSubmit">绑 定</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    userInfo: null,
                    mobile: '',
                    verify_code: '',
                    passwd: '',
                    hidePassword: true,
                    isSending: false,
                    countDownTime: 60,
                    timer: 0,
                    needPassword: false,
                    showTips: false,
                    is_force: 0,
                },
                created(){
                    this.userInfo = api.pageParam.data.user;
                },
                methods:{
                    toggleHidePassword: function(){
                        this.$refs.password.type = this.hidePassword ? 'input' : 'password';
                        this.hidePassword = !this.hidePassword;
                    },
                    sendMsg: function(){
                        var _this = this;
                        var mobile = this.mobile.trim();
                        var reg = /^\d{11}$/;
                        if(!reg.test(mobile)){
                            $.toast('请输入有效的手机号码');
                            return false;
                        }
                       
                        $.ajax({
                            url: '/sms/send_bind_verify_code',
                            method: 'post',
                            headers: {
                                'Authorized-Key': _this.userInfo.authorized_key,
                            },
                            data: {mobile: mobile},
							load:true,
                            success: function(res){
								_this.countDown();
								_this.isSending = true;
                                if(res.data.is_has_mobile == 1){
                                    _this.needPassword = false;
                                    _this.showTips = true;
                                    _this.passwd = '';
                                    _this.hidePassword = true;
                                }else{
                                    _this.needPassword = true;
                                    _this.showTips = false;
                                }
                            }
                        });
                    },
                    countDown: function(){
                        var _this = this;
                        this.timer = clearTimeout(this.timer);
                        this.timer = setTimeout(()=>{
                            let msgCountdown = _this.countDownTime;
                            msgCountdown--;
                            if(msgCountdown <= 0){
                                _this.countDownTime = 60;
                                _this.isSending = false;
                                _this.timer = clearTimeout(_this.timer);
                            }else{
                                _this.countDownTime = msgCountdown;
                                _this.countDown();
                            }
                        }, 1000);
                    },
                    validate: function(){
                        var mobile = this.mobile;
                        var passwd = this.passwd;
                        var verify_code = this.verify_code;
                        var status = true;
                        var msg = [];
                        if(mobile === ''){
                            msg.push('手机号');
                            status = false;
                        }
                        if(verify_code === ''){
                            msg.push('验证码');
                            status = false;
                        }
                        if(this.needPassword && passwd === ''){
                            msg.push('密码');
                            status = false;
                        }
                        if(!status){
                            $.toast(msg.join('、')+'不能为空');
                        }
                        return status;
                    },
                    onSubmit: function(){
                        var _this = this;
                        var status = this.validate();
                        if(!status){
                            return false;
                        }
                        var formData = {
                            mobile: this.mobile,
                            verify_code: this.verify_code,
                            passwd: this.passwd,
                            is_force: this.is_force
                        };
                        formData.is_force = this.needPassword ? 0 : 1;
                        $.ajax({
                            url: '/user/bind_mobile',
                            method: 'post',
                            headers: {
                                'Authorized-Key': _this.userInfo.authorized_key,
                            },
                            data: formData,
							load:true,
                            success: function(res){
                                $.saveUser(res.data);
                                api.sendEvent({
                                    name: 'navGetData',
                                    extra: {navIndex:3}
                                });
                                api.sendEvent({
                                    name: 'backIndex',
                                    extra: {navIndex:3}
                                });
                                api.sendEvent({name: 'loginSuccess'});
								
								api.sendEvent({name: 'reshIndexBasic'});//刷新首页基本信息，比如红包样式
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);
                }
            });
        }
    </script>
</body>
</html>
